<template>
	<view>
		<view class="background"></view>
		<view class="entirety">
			<!-- 有数据时显示详情 -->
			<template v-if="hasData">
				<view class="maintenanceInfo">
					<view class="title">
						维修信息
					</view>
					<view class="body">
						<view>维修单号：<text>{{orderInfo.id}}</text></view>
						<view>下单用户：<text>{{orderInfo.user.name || '-'}}</text></view>
						<view class="contact-row">
							<text>联系方式：<text>{{orderInfo.phone || '-'}}</text></text>
							<image 
								v-if="orderInfo.phone" 
								class="icon-phone" 
								src="/static/电话@2x.png" 
								@click="makePhoneCall"
							/>
						</view>
						<view>维修方式：<text>{{orderInfo.mode}}</text></view>
						<view class="location-row">
							<text>取车位置：<text>{{formatLocation(orderInfo.location)}}</text></text>
							<image 
								v-if="orderInfo && orderInfo.location && getCoordinates(orderInfo.location)"
								class="icon-nav" 
								src="/static/plane@2x.png" 
								@click="openNavigation"
							/>
						</view>
						<view>预约日期：<text>{{orderInfo.reservationTime}}</text></view>
						<view>提交日期：<text>{{orderInfo.submitTime || '-'}}</text></view>
						<view v-if="isArrive">到场时间：<text>{{orderInfo.arriveTime || '-'}}</text></view>
					</view>
				</view>
				<view class="carInfo">
					<view class="title">
						车辆信息
					</view>
					<view class="body">
						<view>车辆类型：<text>{{orderInfo.carType.name || '-'}}</text></view>
						<view>车牌号：<text>{{orderInfo.carNum || '-'}}</text></view>
						<view>
							<view>
								整车照片：
								<view class="imgList">
									<view v-for="(item,index) in orderInfo.vehiclePhotos" :key="index">
										<img class="img" :src="item" alt="" />
									</view>
								</view>
							</view>
						</view>
						<view style="margin-top: 20rpx;margin-bottom: 30rpx;">
							<view>
								维修部位照片：
								<view class="imgList">
									<view v-for="(item,index) in orderInfo.repairPhotos" :key="index">
										<img class="img" :src="item" alt="" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 已预约状态 -->
				<view v-if="orderInfo.status === '0'" class="btn">
					<button @click="dialogToggle">确认到场</button>
				</view>
				<!-- 进行中状态 -->
				<view v-if="orderInfo.status === '1'" class="btn-arrived">
					<button>已到场</button>
				</view>
				<!-- 已完成状态 -->
				<view v-if="orderInfo.status === '2'" class="btn-completed">
					<button>订单已完成</button>
				</view>
				<!-- 已取消状态 -->
				<view v-if="orderInfo.status === '3'" class="btn-cancelled">
					<button>已取消订单</button>
				</view>
				<!-- 弹出层 -->
				<view>
					<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="'msgType'" cancelText="取消" confirmText="确认" :title="msgTitle" :content="msgContent" @confirm="dialogConfirm"
							@close="dialogClose" style="text-align: center;" ></uni-popup-dialog>
					</uni-popup>
				</view>
			</template>
			<!-- 无数据时显示提示 -->
			<template v-else>
				<view class="no-data">
					<image src="/static/no-data.png" mode="aspectFit" class="no-data-image"></image>
					<text>暂无维修预约信息</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {
					id: '',
					user: {
						name: '未知用户'  // 默认用户名
					},
					carType: {
						name: '未知车型'  // 默认车型
					},
					phone: '',
					type: '',
					location: '',
					reservationTime: '未设置',  // 默认预约时间
					submitTime: '未设置',      // 默认提交时间
					arriveTime: '',
					status: '',
					vehiclePhotos: [],
					repairPhotos: [],
					carNum: '未填写'  // 默认车牌号
				},
				msgType: '',
				msgTitle: '确认到场',
				msgContent: '请您确认客户已到场，此操作不可撤销，请谨慎操作！',
				isArrive: false,
				canArrive: false
			}
		},
		computed: {
			// 判断是否有数据
			hasData() {
				return this.orderInfo && this.orderInfo.id;
			}
		},
		onLoad(options) {
			if (options.id) {
				this.loadOrderDetail(options.id);
			}
		},
		methods: {
			// 格式化位置信息
			formatLocation(location) {
				if (!location) return '-';
				return location.split('|')[0];
			},
			// 获取坐标信息
			getCoordinates(location) {
				try {
					if (!location) return null;
					const coords = location.split('|')[1];  // 获取|后面的坐标部分
					if (!coords) return null;
					
					// 坐标格式为 "经度,纬度"，如 "116.397428,39.90923"
					const [longitude, latitude] = coords.split(',').map(coord => coord.trim());
					if (!longitude || !latitude) return null;
					
					// 确保坐标是有效的数字
					const lng = Number(longitude);
					const lat = Number(latitude);
					if (isNaN(lng) || isNaN(lat)) return null;
					
					return { longitude, latitude };
				} catch (error) {
					console.error('解析坐标失败:', error);
					return null;
				}
			},
			// 加载维修预约详情
			loadOrderDetail(id) {
				uni.showLoading({
					title: '加载中...'
				});
				
				this.$request({
					url: `shop/reservation/reservation/${id}`,
					method: 'GET',
					success: (res) => {
						if (res.data?.data) {
							const data = res.data.data;
							this.orderInfo = {
								id: data.id || '',
								user: {
									name: data.user?.name || '未知用户'
								},
								carType: {
									name: data.carType?.name || '未知车型'
								},
								phone: data.phone || '未填写',
								mode: data.type === '0' ? '到店维修' : '上门取车',
								location: data.location || '未设置',
								reservationTime: data.reservationTime || '未设置',
								submitTime: data.submitTime || '未设置',
								arriveTime: data.arriveTime || '',
								status: data.status || '',
								vehiclePhotos: data.vehiclePhotos ? data.vehiclePhotos.split(',').filter(Boolean) : [],
								repairPhotos: data.repairPhotos ? data.repairPhotos.split(',').filter(Boolean) : [],
								carNum: data.carNum || '未填写'
							};
						} else {
							// 数据为空时显示提示
							uni.showToast({
								title: '未找到预约信息',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			// 弹出框
			dialogToggle(type) {
				if (this.orderInfo.status !== '0') return;
				this.msgType = type;
				this.$refs.alertDialog.open();
			},
			// 确认到场
			dialogConfirm() {
				if (this.orderInfo.status !== '0') return;
				
				uni.showLoading({
					title: '提交中...'
				});
				
				this.$request({
					url: 'shop/reservation/reservation',
					method: 'PUT',
					data: {
						id: this.orderInfo.id,
						status: '1'
					},
					success: (res) => {
						if (res.data && res.data.code === 200) {
							this.orderInfo.status = '1';
							uni.showToast({
								title: '确认成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data?.msg || '确认失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '确认失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			dialogClose() {},
			// 拨打电话
			makePhoneCall() {
				if (!this.orderInfo.phone) return;
				
				uni.makePhoneCall({
					phoneNumber: this.orderInfo.phone,
					fail: () => {
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			},
			// 打开导航
			openNavigation() {
				if (!this.orderInfo || !this.orderInfo.location) {
					uni.showToast({
						title: '位置信息不完整',
						icon: 'none'
					});
					return;
				}
				
				const coords = this.getCoordinates(this.orderInfo.location);
				if (!coords) {
					uni.showToast({
						title: '无法获取坐标信息',
						icon: 'none'
					});
					return;
				}
				
				// 使用微信小程序的openLocation API
				uni.openLocation({
					latitude: parseFloat(coords.latitude),  // 转换为浮点数
					longitude: parseFloat(coords.longitude), // 转换为浮点数
					name: this.formatLocation(this.orderInfo.location),
					address: this.formatLocation(this.orderInfo.location),
					success: () => {
						console.log('导航打开成功');
					},
					fail: (err) => {
						console.error('导航打开失败:', err);
						uni.showToast({
							title: '导航打开失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #f0f0f0;
		padding: 0 20rpx;
	}
	.background {
		width: 750rpx;
		height: 280rpx;
		background-color: #2979ff;
		margin-left: -20rpx;
	}
	.entirety{
		position: absolute;
		top: 20rpx;
		width: 710rpx;
	}
// 维修信息样式
	.maintenanceInfo{
		top: -40rpx;
		width: 670rpx;
		padding: 10rpx 20rpx;
		padding-bottom: 20rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	.maintenanceInfo > .title{
		font-size: 34rpx;
		border-bottom: 4rpx solid #f0f0f0;
		height: 60rpx;
		line-height: 60rpx;
	}
	.maintenanceInfo > .body > view {
		margin-top: 10rpx;
		display: flex;
		/* justify-content: space-between; */
	}
// 车辆信息样式
	.carInfo{
		top: 550rpx;
		width: 670rpx;
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		background-color: white;
		border-radius: 20rpx;
	}
	.carInfo > .title{
		font-size: 34rpx;
		border-bottom: 4rpx solid #f0f0f0;
		height: 60rpx;
		line-height: 60rpx;
	}
	.carInfo > .body > view {
		margin-top: 10rpx;
	}
	// 照片列表
	.imgList{
		display: flex;
		width: 710rpx;
		flex-wrap: wrap;
	}
	.imgList > view{
		margin-right: 30rpx;
		margin-top: 10rpx;
		width: 144rpx;
		height: 144rpx;
		overflow: hidden;
	}
	.imgList > view > .img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
// 确认到场按钮样式
	.btn{
		margin-top: 70rpx;
		margin-bottom: 100rpx;
	}
	.btn > button{
		height: 80rpx;
		line-height: 80rpx;
		width: 600rpx;
		background-image: linear-gradient(to right, #3688FF, #0762E6);
		font-size: 32rpx;
		color: white;
		border-radius: 40rpx;
	}
	// 已到场按钮样式
	.btn-arrived {
		margin-top: 70rpx;
		margin-bottom: 100rpx;
	}
	.btn-arrived > button {
		height: 80rpx;
		line-height: 80rpx;
		width: 600rpx;
		font-size: 32rpx;
		border-radius: 40rpx;
		background-color: #909399;
		color: white;
	}
	// 已完成按钮样式
	.btn-completed {
		margin-top: 70rpx;
		margin-bottom: 100rpx;
	}
	.btn-completed > button {
		height: 80rpx;
		line-height: 80rpx;
		width: 600rpx;
		font-size: 32rpx;
		border-radius: 40rpx;
		background-color: #67C23A;
		color: white;
	}
	// 已取消按钮样式
	.btn-cancelled {
		margin-top: 70rpx;
		margin-bottom: 100rpx;
	}
	.btn-cancelled > button {
		height: 80rpx;
		line-height: 80rpx;
		width: 600rpx;
		font-size: 32rpx;
		border-radius: 40rpx;
		background-color: #F56C6C;
		color: white;
	}
	// 无数据提示样式
	.no-data {
		margin-top: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;
		font-size: 28rpx;
	}
	
	.no-data-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	/* 联系方式和位置行样式 */
	.contact-row,
	.location-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 20rpx;
	}
	
	/* 图标样式 */
	.icon-phone,
	.icon-nav {
		width: 40rpx;
		height: 40rpx;
		padding: 10rpx;
	}
	
	/* 点击效果 */
	.icon-phone:active,
	.icon-nav:active {
		opacity: 0.7;
	}
</style>
